import Editor from "@/components/Editor";
import React, { useState, useRef } from "react";
import styles from "./index.less";
import upload from "../../../public/images/upload.png";
import uploadSvg from "../../../public/images/upload.svg";
import cartoon1 from "../../../public/transparent/cartoon1.png";
import cartoon2 from "../../../public/transparent/cartoon2.webp";
import cartoon3 from "../../../public/transparent/cartoon3.webp";
import cartoon4 from "../../../public/transparent/cartoon4.webp";
import cartoon5 from "../../../public/transparent/cartoon5.png";
import cartoon6 from "../../../public/transparent/cartoon6.png";
import cat2 from "../../../public/transparent/cat2.png";
import dog from "../../../public/transparent/dog.webp";
import stone from "../../../public/transparent/stone.png";
import pika from "../../../public/transparent/pika.png";

const EditorPage: React.FC = () => {
  const [isDialogVisible, setDialogVisible] = useState<boolean>(false);
  const [imgUrl, setImgUrl] = useState<string>('');
  const upImgRef = useRef(null);
  const tryContainerRef = useRef(null);
  const tryImgListRef = useRef(null);
  const tryImgList = [
    {
      id: 0,
      url: cartoon1,
      title: "cartoon1",
    },
    {
      id: 1,
      url: cartoon2,
      title: "cartoon2",
    },
    {
      id: 2,
      url: cartoon3,
      title: "cartoon3",
    },
    {
      id: 3,
      url: cartoon4,
      title: "cartoon4",
    },
    {
      id: 4,
      url: cartoon5,
      title: "cartoon5",
    },
    {
      id: 5,
      url: cartoon6,
      title: "cartoon6",
    },
    {
      id: 6,
      url: cat2,
      title: "cat2",
    },
    {
      id: 7,
      url: dog,
      title: "dog",
    },
    {
      id: 8,
      url: stone,
      title: "stone",
    },
    {
      id: 9,
      url: pika,
      title: "pika",
    },
  ];
  const hideVisible = () => {
    setDialogVisible(false);
  };

  const changeImg = (ev: any) => {
    window.onbeforeprint = function () {
      // 阻止默认的打印行为
      ev.preventDefault();
      // 执行其他自定义操作
    };
  };

  const uploadImg = () => {
    (upImgRef.current as any).click();
  };

  const handleChooseTry = (item : any) => {
    setImgUrl(item.url);
    setDialogVisible(true);
  };

  return (
    <div id={styles.editor}>
      <div className="flex justify-center">
        <div>
          <input
            type="file"
            className="hidden"
            ref={upImgRef}
            onChange={changeImg}
            accept="image/png,image/jpeg,image/webp"
          />
          <h2 className="text-center text-white mt-16 mb-4 text-4xl w-full">
            编辑器
          </h2>
          <div
            className={`${styles.uploadModule} h-72 border-2 border-dashed border-slate-400 flex justify-center justify-items-center relative rounded-2xl overflow-hidden mb-12 cursor-pointer bg-no-repeat bg-contain bg-center`}
            onClick={uploadImg}
          >
            <img src={uploadSvg} alt="" className="w-14" />
            <div className="absolute h-8 leading-8 bg-slate-900 text-indigo-40 w-full bottom-0 left-0 flex justify-center align-middle text-sm">
              <img src={upload} className="mt-1 mr-2 h-6" alt="" />
              图片上传
            </div>
          </div>
        </div>
      </div>
      <div className="flex justify-center">
        <div
          className={`${styles.tryContainer} overflow-hidden h-full max-h-80`}
          ref={tryContainerRef}
        >
          <div
            className={`${styles.tryImgList} grid justify-center items-center relative	overflow-y-auto h-full`}
            ref={tryImgListRef}
          >
            {tryImgList.map((item) => (
              <div
                key={item.id}
                className={`${styles.tryItem} w-28 h-28 rounded-lg bg-current overflow-hidden flex justify-center items-center flex-wrap cursor-pointer relative`}
                onClick={() => handleChooseTry(item)}
              >
                <img
                  src={item.url}
                  alt={item.title}
                  className="h-full"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
      <Editor visible={isDialogVisible} hideVisible={hideVisible} imgUrl = {imgUrl}/>
    </div>
  );
};

export default EditorPage;
